.bigScreen {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;

  .white {
    color: white;
  }

  .font-sm {
    font-size: 12px;
  }

  .font-md {
    font-size: 14px;
  }

  .font-lg {
    font-size: 16px;
  }

  .font-bt {
    font-size: 20px;
  }

  .bg {
    width: 100%;
    height: 100%;
    background-image: url("~@/assets/img/bigScreen/bigScreen_background_all.svg");
    background-size: cover;
    background-position: center center;

    .header {
      width: 100%;
      height: 6%;
      background-image: url("~@/assets/img/bigScreen/TOP_BG.png");
      background-size: 100% 100%;
      display: flex;

      .time {
        padding-left: 22px;
        width: 7%;
        height: 100%;

        .dateDay {
          padding-left: 2px;
          height: 35%;
          width: 100%;
          font-size: 20px;
          font-weight: bold;
          margin-top: 20%;
        }
        .dataOther {
          height: 40%;
          width: 100%;
          font-size: 12px;
        }
      }

      .split {
        background-image: url("~@/assets/img/bigScreen/split.svg");
        background-size: 100% 100%;
        width: 2px;
        height: 50%;
        margin-top: 1.2%;
      }

      .weather {
        width: 6.5%;
        height: 100%;
        display: flex;
        margin-left: 1%;
        padding-top: 12px;

        .weather_icon {
          width: 30%;
          height: 100%;
          .svg-icon {
            height: 100%;
            width: 100%;
          }
        }

        .weather_value {
          width: 50%;
          height: 100%;
          text-align: center;
          padding-top: 8%;

          .temperature {
            width: 100%;
            height: 40%;
            font-size: 20px;
            font-weight: bold;
          }

          .wind {
            margin-top: 4%;
            width: 100%;
            height: 40%;
            font-size: 12px;
          }
        }
      }

      .header_title {
        height: 100%;
        width: 72%;
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        line-height: 68px;
        color: #86dbff;
      }
    }

    .content {
      display: flex;
      width: 100%;
      height: 95%;
      padding: 4px 16px 0 16px;

      .middle {
        width: 52%;
        height: 100%;
      }

      .right {
        width: 24%;
        height: 100%;

        .right_top {
          width: 100%;
          height: 40%;
          margin-top: 3%;

          .right_top_title {
            width: 100%;
            height: 8%;
          }

          .right_top_content{
            width: 100%;
            height: 92%;
          }
        }
        .right_bottom {
          width: 100%;
          height: 55.5%;
          margin-top: 1.3%;

          .right_bottom_title {
            width: 100%;
            height: 6%;
          }

          .right_bottom_content{
            width: 100%;
            height: 94%;
          }
        }
      }

      .card_title {
        font-size: 16px;
        margin-left: 12%;
        padding-top: 1.5%;
        height: 100%;
      }
    }
  }
}
